<template>
  <div id="pagination">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="pageSize? pageSize : defaultPageSize"
      :page-sizes="pageSizes? pageSizes : defaultPageSizes"
      :layout="layouts? layouts : defaultLayout"
      :total="totals? totals : defaultTotal">
    </el-pagination>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Pagination} from 'element-ui' 
  // import Bus from '@/common/js/vueBus.js';

  Vue.use(Pagination)
  export default {
    name: 'pagination',
    data(){
      return {
        defaultTotal:0,
        defaultPageSize:10,
        defaultPageSizes:[10,20,50],
        defaultLayout:'total,sizes, prev, pager, next'
      }
    },
    props:['totals','pageSize','pageSizes','layouts'],
    methods:{
      handleSizeChange:function(size){
        if (this.$attrs.sizeChange) {
          this.$attrs.sizeChange(size)
        }
      },
      handleCurrentChange:function(currentPage){
        if (this.$attrs.currentChange) {
          this.$attrs.currentChange(currentPage)
        }
      }
    },
    mounted(){
    }
  }
</script>
